<template>
  <a-layout class="fm-container" :style="{height: height, borderTop: '1px solid #e8e8e8'}">
    <a-layout class="fm-container-center">
      <a-layout-sider width="220px" v-model="leftCollapsed" :collapsed-width="0">
        <div
          class="drawer-left"
          :class="{ leftActive: isLeftActive, leftClose: isLeftClose }"
          @click="clickBtn('left')"
        >
          <ych-icon :type="isLeftClose ? 'right' : 'left'"/>
        </div>
        <div class="fm-container-center-left">
          <a-tabs size="small" defaultActiveKey="1">
            <a-tab-pane :tab="$t('m.eform.formDesign.label.current_app')" key="1">
              <layout-item :groupId="groupId" :current="true"></layout-item>
            </a-tab-pane>
            <a-tab-pane :tab="$t('m.eform.formDesign.label.common_app')" key="2">
              <a-collapse size="small">
                <a-collapse-panel :header="group.groupName" :key="group.id" v-for="group in comGroup"
                                  class="group-panel">
                  <layout-item :groupId="group.id"></layout-item>
                </a-collapse-panel>
              </a-collapse>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-layout-sider>
      <!--设计区-->
      <a-layout-content :class="{ 'widget-empty': data.list.length === 0 }">
        <layout-form
          :data="data"
          :selectWidget="selectWidget"
          @select="selectModel"
          @handleWidgetOpensSet="clickBtn('right')"
          @handleEdit="handleEdit"
        />
      </a-layout-content>
      <!--属性设置区-->
      <a-layout-sider
        width="200px"
        class="fm-widget-config-container drawer-box-right"
        :class="{ drawerActive: isActive, drawerClose: isClose }"
        v-model="rightCollapsed"
        :collapsed-width="0"
        :default-collapsed="true"
      >
        <a-layout style="height: 100%">
          <div
            class="drawer-handle"
            :class="{ rightActive: isActive, rightClose: isClose }"
            @click="clickBtn('right')"
          >
            <ych-icon class="" :type="isClose ? 'left' : 'right'"/>
          </div>
          <a-layout-header class="fm-header-bar" style="height: 45px">
            <div
              class="fm-config-tab"
              :class="{ active: configTab === 'widget' }"
              @click="handleConfigSelect('widget')"
            >
              {{ $t('m.eform.formDesign.label.zu-jian-shu-xing') }} </div>
          </a-layout-header>
          <a-layout-content class="fm-config-content">
            <layout-config v-show="configTab === 'widget'" :selectWidget="selectWidget" :data="data" :group-id="groupId"/>
          </a-layout-content>
        </a-layout>
      </a-layout-sider>
    </a-layout>

    <actAppView-modal ref="actAppViewModal" @ok="modalFormOk" :groupId="groupId"></actAppView-modal>
    <actAppView-editable-modal ref="actAppViewEditableModal" @ok="modalFormOk" :groupId="groupId"></actAppView-editable-modal>
    <ActAppTreeModal ref="actAppTreeModal" @ok="modalFormOk" :groupId="groupId"></ActAppTreeModal>

  </a-layout>
</template>

<script>

import {getAction} from '@/api/manage'
import YchConstant from '@/api/YchConstant'
import LayoutConfig from './LayoutConfig';
import LayoutForm from './LayoutForm';
import './styles/cover.less';
import './styles/index.less';
import "../modules/designer/static/icons/iconfont";
import LayoutItem from './LayoutItem'
import ActAppViewModal from "../modules/ActAppViewModal";
import ActAppViewEditableModal from "../modules/ActAppViewEditableModal";
import ActAppTreeModal from "../modules/ActAppTreeModal";

export default {
  name: 'LayoutContainer',
  components: {
    LayoutConfig,
    LayoutForm,
    LayoutItem,
    ActAppViewModal,
    ActAppTreeModal,
    ActAppViewEditableModal,
  },
  props: {
    data: {
      type: Object,
      default: () => {
      }
    },
    groupId: {
      type: String,
      required: true
    },
    height: {
      type: String,
      default: '100vh'
    },
  },
  data() {
    return {
      comGroup: [],
      configTab: 'widget',
      selectWidget: {},
      isActive: false,
      isClose: true,
      isLeftActive: true,
      isLeftClose: false,
      leftCollapsed: false,
      rightCollapsed: true,
      url: {
        queryByCode: YchConstant.PREFIX_EFORM + '/manage/actAppView/queryByCode',
        getCommGroupForDragLayout: YchConstant.PREFIX_EFORM + '/manage/actAppView/getCommGroupForDragLayout',
      }
    };
  },
  mounted() {
    this.initComGroup();
  },
  methods: {
    initComGroup() {
      getAction(this.url.getCommGroupForDragLayout, {
        groupId: this.groupId
      }).then((res) => {
        if (res.success) {
          this.comGroup = res.result || []
        } else {
          this.messageUtil.warning(res.message)
        }
      })
    },
    selectModel(value) {
      this.selectWidget = value || {}
    },
    handleConfigSelect(value) {
      this.configTab = value;
    },
    clickBtn(type) {
      if (type === 'right') {
        this.isClose = !this.isClose;
        this.isActive = !this.isActive;
        this.rightCollapsed = !this.rightCollapsed;
      } else if (type === 'left') {
        this.leftCollapsed = !this.leftCollapsed;
        this.isLeftActive = !this.isLeftActive;
        this.isLeftClose = !this.isLeftClose;
      }
    },
    handleEdit() {
      let selectWidget = this.selectWidget;
      if (this.selectWidget.type === 'tabs' && this.selectWidget.selectTab) {
        selectWidget = this.selectWidget.tabs.find(item => item.key === this.selectWidget.selectTab)
      }
      if (selectWidget.type === 'table' || selectWidget.type === 'editableTable' || selectWidget.type === 'tree') {
        //列表和树
        getAction(this.url.queryByCode, {viewCode: selectWidget.code}).then((res) => {
          if (res.success) {
            this.editView(res.result)
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
        })
      } else if (selectWidget.type === 'report') {
        //TODO 报表
        this.$message.warning(this.$t('m.eform.formDesign.label.zan-bu-zhi-chi'))
      } else if (selectWidget.type === 'form') {
        //TODO 表单
        this.$message.warning(this.$t('m.eform.formDesign.label.zan-bu-zhi-chi'))
      } else {
        this.$message.warning(this.$t('m.eform.formDesign.label.bu-neng-bian-ji'))
      }
    },
    editView(record) {
      if (record.viewType === 'tree') {
        this.$refs.actAppTreeModal.edit(record)
        this.$refs.actAppTreeModal.title = this.$t('m.common.button.update')
      } else if (record.viewType === 'table') {
        this.$refs.actAppViewModal.edit(record)
        this.$refs.actAppViewModal.title = this.$t('m.common.button.update')
      } else if (record.viewType === 'editableTable') {
        this.$refs.actAppViewEditableModal.edit(record)
        this.$refs.actAppViewEditableModal.title = this.$t('m.common.button.update')
      }
    },
    modalFormOk(formData) {
      let selectWidget = this.selectWidget;
      if (this.selectWidget.type === 'tabs' && this.selectWidget.selectTab) {
        selectWidget = this.selectWidget.tabs.find(item => item.key === this.selectWidget.selectTab)
      }
      selectWidget.code = formData.viewCode
      selectWidget.title = formData.viewName
      this.selectWidget.refreshFlg = (this.selectWidget.refreshFlg || 0) + 1
    },
  },
};
</script>

<style lang="less" scoped>
.widget-empty {
  background-position: 50%;
}

/*收缩功能 start*/
.drawer-handle {
  position: absolute;
  right: 0;
  width: 15px;
  top: 50%;
  height: 40px;
  z-index: 99999;
  padding: 10px 0;
  background: #fff;
  cursor: pointer;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  box-shadow: -4px 0 4px 0 #ddd;

  i {
    color: dodgerblue;
  }
}

.drawer-left {
  position: absolute;
  left: 220px;
  width: 15px;
  top: 50%;
  height: 40px;
  z-index: 99999;
  padding: 10px 0;
  background: #fff;
  cursor: pointer;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;

  i {
    color: dodgerblue;
  }
}

.drawer-box-right {
  position: absolute;
  background: #fff;
  right: 0;
  bottom: 0;
  top: 0;
  border: 0 solid #ddd;
  border-top: 0;
  box-shadow: -2px 0 6px 0 #ddd;
}

.drawerActive {
  animation: opendoor 0.4s normal forwards;
}

@keyframes opendoor {
  from {
    width: 0;
  }
  to {
    width: 200px;
  }
}

// 关
.drawerClose {
  animation: close 0.4s normal forwards;
}

@keyframes close {
  0% {
    width: 200px;
  }
  100% {
    width: 0;
  }
}

.rightActive {
  animation: rhandleopen 0.2s normal forwards;
}

.rightClose {
  animation: rhandleclose 0.2s normal forwards;
}

.leftActive {
  animation: lhandleopen 0.2s normal forwards;
}

.leftClose {
  animation: lhandleclose 0.2s normal forwards;
}

@keyframes rhandleclose {
  0% {
    right: 200px;
  }
  100% {
    right: 0;
  }
}

@keyframes rhandleopen {
  0% {
    right: 0;
  }
  100% {
    right: 200px;
  }
}

@keyframes lhandleclose {
  0% {
    left: 220px;
  }
  100% {
    left: 0;
  }
}

@keyframes lhandleopen {
  0% {
    left: 0;
  }
  100% {
    left: 220px;
  }
}

/* antd 样式start */
.fm-container {
  .ant-layout-sider,
  .ant-layout-header {
    background: #fff !important;
  }

  .ant-layout-header {
    padding: 0;
    line-height: 45px;
    border-bottom: 1px solid #ddd;

    .btn-group {
      text-align: right;
      padding: 0 10px;
    }
  }

  .ant-layout-content {
    overflow: auto;
  }
}

/deep/ .group-panel > .ant-collapse-content > .ant-collapse-content-box {
  padding: 2px 0 0 0;
}

/* antd 样式end */
</style>
